<script setup lang="ts">
import { useRequest } from 'vue-request'
import { fetchDriverDetailAPI } from '@/apis/fetchDriverDetail'
import { useDriverStatusStore } from '@/store/driverStatus'
import { useUserInfoStore } from '@/store/userInfo'
import avatarPlaceholder from '@/static/images/avatar_placeholder.png'

defineEmits(['updateProfile', 'signIn', 'login'])

const userInfoStore = useUserInfoStore()
const driverStatusStore = useDriverStatusStore()

const { data: driverDetail } = useRequest(
  () => fetchDriverDetailAPI(userInfoStore.userInfo!.token).then((res) => {
    driverStatusStore.isOnline = Boolean(res.data?.data.is_online)
    return res.data?.data
  }),
)
const isComeIn = computed(() => {
  return driverDetail.value?.status.toString() === '1'
})
const isLoggedIn = computed(() => {
  return userInfoStore.userInfo && userInfoStore.userInfo?.token.length > 0
})
</script>

<template>
  <view class="flex items-center">
    <view class="flex flex-auto items-center">
      <image
        class="h-140rpx w-140rpx flex-none rounded-full"
        :src="userInfoStore.userInfo?.avatar || avatarPlaceholder"
      />
      <Spacer w="24" />
      <view v-if="!isLoggedIn" class="flex flex-auto flex-col">
        <view class="text-40rpx text-white font-semibold leading-56rpx">
          欢迎使用通达电召
        </view>
        <Spacer h="12" />
        <button
          class="self-start rounded-full bg-white px-18rpx py-8rpx text-28rpx text-#3F8BF6 font-semibold leading-40rpx"
          :style="{ margin: '0 !important' }"
          @tap="$emit('login')"
        >
          去登录
        </button>
      </view>
      <view v-else>
        <view v-if="!isComeIn" class="flex flex-auto flex-col">
          <view class="text-40rpx text-white font-semibold leading-56rpx">
            欢迎使用通达电召
          </view>
          <Spacer h="12" />
          <button
            class="self-start rounded-full bg-white px-18rpx py-8rpx text-28rpx text-#3F8BF6 font-semibold leading-40rpx"
            :style="{ margin: '0 !important' }"
            @tap="$emit('signIn')"
          >
            去入驻
          </button>
        </view>
        <view v-else class="flex flex-auto flex-col">
          <view v-if="isComeIn" class="flex items-center">
            <view class="text-40rpx text-white font-semibold leading-56rpx">
              {{ userInfoStore.userInfo?.nickname || '用户' }}
            </view>
            <Spacer w="24" />
            <image
              class="h-32rpx w-32rpx"
              src="@/static/images/edit_white.png"
              @tap="$emit('updateProfile')"
            />
          </view>
          <Spacer h="12" />
          <view v-if="isComeIn" class="text-36rpx text-white font-semibold leading-50rpx">
            {{ userInfoStore.userInfo?.mobile || '手机号未知' }}
          </view>
        </view>
      </view>
    </view>
    <view class="flex flex-col self-stretch justify-center border-l-1px border-l-white border-opacity-20 border-l-solid pl-64rpx">
      <view class="flex flex-none flex-col items-center">
        <switch
          :checked="driverStatusStore.isOnline"
          space="4"
          color="#FA662F"
          @change="e => driverStatusStore.setIsOnline(e.detail.value)"
        />
        <Spacer h="8" />
        <view class="text-24rpx text-white font-semibold leading-24rpx">
          {{ driverStatusStore.isOnline ? '工作中' : '休息中' }}
        </view>
      </view>
    </view>
  </view>
</template>
